<template>
    <div class="Strategy_Mail_Card">
        <div class="Strategy_Mail_Card-mobile">
            <div class="left">
                    <img src="@/assets/Strategy_Mail_Card1.jpg">
            </div>
            <div class="middle">
                <div class="middle-top-title">
                    乐宝基金
                </div>
                <div class="middle-bottom-title">
                    <div class="middle-bottom-title-left">
                        <div class="middle-bottom-title-left-top">
                            历史最大回撤
                        </div>
                        <div class="middle-bottom-title-left-bottom">
                            17.74%
                        </div>
                    </div>
                    <div class="middle-bottom-title-middle">
                        |
                    </div>
                    <div class="middle-bottom-title-right">
                        <div class="middle-bottom-title-left-top">
                            订阅价
                        </div>
                        <div class="middle-bottom-title-left-bottom">
                            3000元/半年
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    过来过去
                </div>
                <div class="right-bottom">
                    <button class="btn">详情</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Strategy_Mail_Card'
}
</script>
<style scoped>
@media screen and (max-width: 981px){
#Strategy_Mail_Card-mobile{
    float: left;
    background-color: white;
    width:100%;
    height: 80px;
    border-bottom: 1px solid #e6e6e6;
}
.left{
    float: left;
    width:25%;
    height: 80px;
    padding-left:2%;
    padding-right:2%;
    background-color: white;
    border-bottom: 1px solid #e6e6e6;
}
.left img{
    width:100%;
    height: 80px;
}
.middle{
    float: left;
    width:50%;
    height: 80px;
    background-color: white;
    border-bottom: 1px solid #e6e6e6;
}
.middle .middle-top-title{
    width: 100%;
    height: 40px;
    padding-top:8px;
    padding-bottom: 8px;
    font-size: 20px;
    line-height: 24px;
    font-family: "KaiTi"; 
}
.middle .middle-bottom-title{
    width: 100%;
    height: 40px;
    padding-bottom: 10px;
}
.middle .middle-bottom-title .middle-bottom-title-left{
    float:left;
    width:45%;
    height: 30px;
}
.middle .middle-bottom-title .middle-bottom-title-right{
    float:left;
    width:45%;
    height: 30px;
}
.middle .middle-bottom-title .middle-bottom-title-middle{
    float:left;
    width:10%;
    text-align:center; 
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    color: rgb(218, 212, 212);
}
.middle-bottom-title-left-top{
    width:100%;
    height: 13px;
    font-size: 8px;
    line-height: 13px;
    font-family: "KaiTi";
    text-align: center;
}
 .middle-bottom-title-left-bottom{
    width:100%;
    height: 13px;
    font-size: 8px;
    line-height: 13px;
    font-family: "KaiTi";
    text-align: center;
}
.right{
    float: left;
    width:25%;
    height: 80px;;
    background-color: white;
    border-bottom: 1px solid #e6e6e6;
}
.right .right-top{
    width: 100%;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    font-family: "KaiTi";
    color: black;
    text-align: center;
}
.right .right-bottom{
    width: 100%;
    height: 40px;
    text-align: center;
}
.right .right-bottom .btn{
    font-size: 15px;
    width: 60%;
    height: 30px;
    color: white;
    background: blue;
}
}
</style>